{% extends 'base.html' %}
{% load static %}
{% block title %}尚硅谷书店-我的订单{% endblock title %}
{% block topfiles %}
{% endblock topfiles %}
{% block body %}

    <h3 class="common_title">确认收货地址</h3>

    <div class="common_list_con clearfix">
        <dl>
            <dt>寄送到：</dt>
            <dd><input type="radio" name="addr_id" value="{{ addr.id }}" checked="">{{ addr.recipient_addr }} （{{ addr.recipient_name }} 收） {{ addr.recipient_phone }}</dd>
        </dl>
        <a href="{% url 'user:address' %}" class="edit_site">编辑收货地址</a>

    </div>

    <h3 class="common_title">支付方式</h3>
    <div class="common_list_con clearfix">
        <div class="pay_style_con clearfix">
            <input type="radio" name="pay_style" value="1" checked>
            <label class="cash">货到付款</label>
            <input type="radio" name="pay_style" value="2">
            <label class="weixin">微信支付</label>
            <input type="radio" name="pay_style" value="3">
            <label class="zhifubao"></label>
            <input type="radio" name="pay_style" value="4">
            <label class="bank">银行卡支付</label>
        </div>
    </div>

    <h3 class="common_title">商品列表</h3>

    <div class="common_list_con clearfix">
        <ul class="book_list_th clearfix">
            <li class="col01">商品名称</li>
            <li class="col02">商品单位</li>
            <li class="col03">商品价格</li>
            <li class="col04">数量</li>
            <li class="col05">小计</li>
        </ul>
        {% for book in books_li %}
            <ul class="book_list_td clearfix">
                <li class="col01">{{ forloop.counter }}</li>
                <li class="col02"><img src="{% static book.image %}"></li>
                <li class="col03">{{ book.name }}</li>
                <li class="col04">{{ book.unite }}</li>
                <li class="col05">{{ book.price }}元</li>
                <li class="col06">{{ book.count }}</li>
                <li class="col07">{{ book.amount }}元</li>
            </ul>
        {% endfor %}
    </div>

    <h3 class="common_title">总金额结算</h3>

    <div class="common_list_con clearfix">
        <div class="settle_con">
            <div class="total_book_count">共<em>{{ total_count }}</em>件商品，总金额<b>{{ total_price }}元</b></div>
            <div class="transit">运费：<b>{{ transit_price }}元</b></div>
            <div class="total_pay">实付款：<b>{{ total_pay }}元</b></div>
        </div>
    </div>

    <div class="order_submit clearfix">
        {% csrf_token %}
        <a href="javascript:;" books_ids="{{ books_ids }}" id="order_btn">提交订单</a>
    </div>
{% endblock body %}
{% block bottom %}
    <div class="popup_con">
        <div class="popup">
            <p>订单提交成功！</p>
        </div>

        <div class="mask"></div>
    </div>
{% endblock bottom %}
{% block bottomfiles %}
    <script type="text/javascript">
        $('#order_btn').click(function () {
            // 获取收货地址的id，支付方式，用户购买的商品id
            addr_id = $('input[name="addr_id"]').val()
            pay_method = $('input[name="pay_style"]:checked').val()
            books_ids = $(this).attr('books_ids')
            csrf = $('input[name="csrfmiddlewaretoken"]').val()
            // 发起post请求，访问/order/commit/
            params = {
                'addr_id': addr_id,
                'pay_method': pay_method,
                'books_ids': books_ids,
                'csrfmiddlewaretoken': csrf
            }
            $.post('/order/commit/', params, function (data) {
                // 根据json进行处理
                if (data.res == 6) {
                    localStorage.setItem('order_finish', 2);
                    $('.popup_con').fadeIn('fast', function () {
                        setTimeout(function () {
                            $('.popup_con').fadeOut('fast', function () {
                                window.location.href = '/user/order/';
                            });
                        }, 3000)
                    });
                } else {
                    alert(data.errmsg)
                }
            })

        });
    </script>
{% endblock bottomfiles %}